

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>binperson</title>
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">

  <link rel="stylesheet" href="../css/main.css">
  <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
  <![endif]-->
</head>

<body style="background: #000000;">
<div id="main">
    <header id="header">
        <nav class="navbar navbar-binperson navbar-static-top visible-lg">
            <div class="container">
                <div class="navbar-header">
                    <h1>
                        <a class="navbar-brand" href="../index.html">Binperson</a>
                    </h1>
                    <h2>Architecture</h2>
                </div>
                <ul class="navbar-right">
                    <li>
                        <a href="../index.html">HOME</a>
                    </li>
                    <li>
                        <a href="#">ABOUT US</a>
                    </li>
                    <li>
                        <a href="#">CONTACTS</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <article id="accept">
        <section>
            <nav>
                <div class="container">
                    <div class="row isotope-order">
                        <div class="col-md-2">
                            <a class="btn btn-binperson active" href="#" role="button">Javascript</a>
                        </div>
                        <div class="col-md-2">
                            <a class="btn btn-binperson" href="#" role="button">ES2015</a>
                        </div>
                        <div class="col-md-2">
                            <a class="btn btn-binperson" href="#" role="button">C++</a>
                        </div>
                    </div>
                    <div id="img-contain" class="container">
                        <div class="row">
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                        </div>

                    </div>
                </div>

            </nav>
        </section>
    </article>
</div>


<div id="lib-wrapper">
    <div class="container">
        <div class="lib-content">
            <img src="" alt="" id="lib-img">
            <div class="image_caption_wrapper"></div>
        </div>

    </div>
    <a class="butt-gofull" href=""></a>
    <a class="butt-close" href=""></a>
    <a class="butt-prev" href=""></a>
    <a class="butt-next" href=""></a>
</div>

<section id="ac-footer">
    <div class="container">
        <div class="col-md-10">
            <div class="ac-line"></div>
            <div>
                <ul>
                    <li>
                        Built with
                        <span class="glyphicon glyphicon-heart"></span>
                    </li>

                    <li>by binperson</li>
                </ul>
            </div>
        </div>
    </div>
</section>




  <script src="../lib/jquery/jquery.js"></script>
  <script src="../lib/bootstrap/js/bootstrap.js"></script>
  <script src="../js/main.js"></script>
  <script type="text/javascript">

      var oImgContain = document.getElementById('img-contain');
      var aImgCol = oImgContain.getElementsByClassName('col-md-3');
      var iLen = aImgCol.length;

      var colWid = $('.col-md-3').width();
      getList();
      function getList(){
        $.get('/actupian',function(data,status){
            if(!data.length){
                return;
            }
            for (var i = 0; i < data.length; i++) {
                var _index = getShort();
                var oDiv = document.createElement('div');
                var oImg = document.createElement('img');
                oImg.src = '../img/ac/'+data[i].name+'.jpg';
                oImg.style.width = colWid + 'px';
                oImg.style.height = data[i].height*(colWid/data[i].width) + 'px';
                oDiv.appendChild(oImg);
                aImgCol[_index].appendChild(oDiv);
            }
        });
      }
      function getShort(){
        var index = 1;
        var ih = aImgCol[index].offsetHeight;
        for (var i = 0; i < iLen; i++) {

            if(aImgCol[i].offsetHeight<ih){
                index = i;

                ih = aImgCol[i].offsetHeight;
            }
        }
        return index;
      }
      $(aImgCol).delegate('img', 'click', function(){

        var imgSrc = this.src;
        var libImg = document.getElementById('lib-img');
        libImg.src = imgSrc;
       $('#lib-wrapper').show();
       $('#main').hide();
      });
  </script>
</body>

</html>